<template>
    <div class="errPage-container">

        <el-row>
            <el-col :span="12">
                <h5 class="text-jumbo text-ginormous">
                    欢迎光临~!
                </h5>
                <!--                <ul class="list-unstyled">-->
                <!--                    <li>你想干嘛呢:</li>-->
                <!--                    <li class="link-type">-->
                <!--                        <a href="http://news.baidu.com/">随便看看</a>-->
                <!--                    </li>-->
                <!--                    <li><a href="#" @click.prSevent="dialogVisible=true">点我看图</a></li>-->
                <!--                </ul>-->
            </el-col>
            <el-col :span="12">
                <img :src="errGif" width="600" height="428" alt="Girl has dropped her ice cream.">
            </el-col>
            <el-button type="success" @click="xiangqing">查看详情</el-button>
            <br>
            <h1> 状态：</h1>
            <h1 v-text="state"></h1><br>

            <div v-if="state=='驳回'">
                <el-button type="danger" @click="retuen">驳回信息</el-button>
            </div>

            <div v-if="state=='驳回'">
                <el-button type="warning" @click="edit">修改</el-button>
            </div>
            <div v-if="state=='驳回'">
                <el-button type="warning" @click="login2">去登陆</el-button>
                <h1 style="color: red">你的申请被驳回了，这不重新修改一下</h1>
            </div>

            <div v-if="state=='待激活'">
                <h1 style="color: deepskyblue">去你的邮箱激活叭</h1>
                <el-button type="warning" @click="login2">已经激活了,点击登陆</el-button>
            </div>

        </el-row>

        <!--回显详情-->
        <el-dialog :visible.sync="dialogVisible" title="详情">
            <el-table :data="user">
                <el-table-column prop="username" label="店主信息" width="100"></el-table-column>
                <el-table-column prop="email" label="邮箱" width="100"></el-table-column>
                <el-table-column prop="phone" label="手机号码" width="100"></el-table-column>
                <el-table-column prop="name" label="店铺名" width="100"></el-table-column>
                <el-table-column prop="tel" label="座机" width="100"></el-table-column>
                <el-table-column prop="address" label="地址" width="100"></el-table-column>

                <el-table-column prop="log" label="logo" width="100">
                    <img :src="logo1" style="width: 50px;height: 50px"/>
                </el-table-column>

                <el-table-column prop="registerTime" label="创建时间" width="100"></el-table-column>
            </el-table>
        </el-dialog>

        <!--回显驳回详情-->
        <el-dialog :visible.sync="dialogVisible1" title="驳回详情">
            <el-table :data="return1">
                <el-table-column prop="type" label="驳回类型" width="200"></el-table-column>
                <el-table-column prop="text" label="驳回信息" width="200"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
            </el-table>
        </el-dialog>

        <!--修改-->
        <el-dialog :visible.sync="dialogVisible2" title="修改">
            <el-form :model="shop" ref="shopForm" label-position="left" label-width="100px"
                     class="demo-ruleForm login-container">

                <el-form-item prop="name" :label="$t('operation.name')">
                    <el-input type="text" v-model="shop.name" auto-complete="off"
                              :placeholder="$t('operation.name1')"></el-input>
                </el-form-item>
                <el-form-item prop="tel" :label="$t('operation.Plane')">
                    <el-input type="text" v-model="shop.tel" auto-complete="off"
                              :placeholder="$t('operation.Plane1')"></el-input>
                </el-form-item>
                <el-form-item prop="address" :label="$t('operation.address')">
                    <el-input type="text" style="width: 350px" v-model="shop.address" auto-complete="off"
                              :placeholder="$t('operation.address1')"></el-input>
                </el-form-item>
                <el-form-item prop="logo" :label="$t('operation.Logo')">
                    <el-upload
                            class="upload-demo"
                            ref="upload"
                            action="/api/fastdfs/upload/"
                            :on-remove="handleRemove"
                            :on-success="handleSuccess"
                            :file-list="fileList"
                            list-type="picture"
                            >
                        <!--:auto-upload="false"-->
                        <el-button size="small" type="primary">{{ $t('operation.CheckFile') }}</el-button>
                        <div slot="tip" class="el-upload__tip">{{ $t('operation.rule') }}</div>
                    </el-upload>
                    <!--回显图片-->
<!--                    <img v-show="true" :src="logo1" style="width: 80px;height: 80px"/>-->
                </el-form-item>
                <h3>{{ $t('operation.manager') }}</h3>
                <el-form-item prop="username" :label="$t('operation.number')">
                    <el-input type="text" v-model="shop.username" auto-complete="off"
                              :placeholder="$t('operation.number1')"></el-input>
                </el-form-item>
                <el-form-item prop="tel" :label="$t('operation.phone')">
                    <el-input type="text" v-model="shop.phone" auto-complete="off"
                              :placeholder="$t('operation.phone1')"></el-input>
                </el-form-item>
                <el-form-item prop="email" :label="$t('operation.email')">
                    <el-input type="text" v-model="shop.email" auto-complete="off"
                              :placeholder="$t('operation.email1')"></el-input>
                </el-form-item>

                <el-form-item style="width:100%;">
                    <el-button type="primary" style="width:100%;" @click="settledIn">{{ $t('operation.xiugai') }}
                    </el-button>
                </el-form-item>
                <el-form-item style="width:100%;">
                    <el-button type="success" style="width:100%;" @click="changeLang">
                        {{$t('operation.Chinese_English_switch') }}
                    </el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
    import errGif from '../../assets/401_images/401.gif'

    export default {
        name: 'Page401',
        data() {
            return {
                //是否展示
                isShow: true,
                //回显图片
                logo1: "",
                errGif: errGif + '?' + +new Date(),
                ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
                dialogVisible: false,
                //驳回信息
                dialogVisible1: false,
                //修改
                dialogVisible2: false,
                //状态
                state: '',
                //哪一个用户
                id: '',
                //驳回信息
                return1: [],
                user: [{
                    username: '',
                    email: '',
                    phone: '',
                    //店铺名称
                    name: '',
                    //店铺座机
                    tel: '',
                    address: '',
                    logo: '',
                    registerTime: '',
                    loginInfo: ''
                }],


                i18n: {},
                fileList: [],
                //shop:shop 为了做数据表单校验不要嵌套对象
                shop: {
                    id: '',
                    name: '',
                    tel: '',
                    address: '',
                    logo: '',
                    username: '',
                    phone: '',
                    email: '',
                    loginInfo: ''
                },
            }
        },
        methods: {
            back() {
                if (this.$route.query.noGoBack) {
                    this.$router.push({
                        path: '/dashboard'
                    })
                } else {
                    this.$router.go(-1)
                }
            },
            xiangqing() {
                this.dialogVisible = true
            },
            //驳回信息
            retuen() {
                console.log(this.id)
                this.$http.post("/check/queryReturn/" + this.id).then(res => {
                    let {success, message, resultObj} = res.data
                    console.log(resultObj)
                    this.dialogVisible1 = true
                    this.return1 = resultObj
                })
            },
            //修改信息
            edit() {
                // this.$router.push({path: '/shopReg'});
                this.dialogVisible2 = true
                //回显
                /*for (let x in this.shop) {

                }*/
                this.fileList=[]
                this.shop.name = this.user[0].name
                this.shop.tel = this.user[0].tel
                this.shop.address = this.user[0].address
                this.shop.logo = "http://121.37.194.36" + this.user[0].logo
                this.shop.username = this.user[0].username
                this.shop.phone = this.user[0].phone
                this.shop.email = this.user[0].email
                this.shop.loginInfo = this.user[0].loginInfo
                console.log(this.user[0].logo)
                if (this.user[0].logo){
                    this.fileList.push({"url":"http://121.37.194.36" + this.user[0].logo})
                }
            },

            //国际化
            changeLang() {
                console.log(this.$i18n.locale)
                let lang = this.$i18n.locale === 'zh-CN' ? 'en-US' : 'zh-CN'
                this.$i18n.locale = lang
            },
            sumbit1() {
                //手动提交
                // this.$refs.upload.submit();


                //表单数据提交
                //拷贝后面对象的值到新对象,防止后面代码改动引起模型变化
                this.shop.id = this.id
                //修改为待审核
                this.shop.state = 0
                let para = Object.assign({}, this.shop); //shop 本身这个参数里面就有店铺和管理员信息
                // 为了后台好接收，封装一个对象放到里面
                let admin = {
                    username: para.username,
                    phone: para.phone,
                    email: para.email,
                    password: para.password,
                    comfirmPassword: para.comfirmPassword,
                    loginInfo: {
                        id: para.loginInfo
                    }
                }
                para.admin = admin;
                //修改
                this.$http.post("/shop/updateSettlement", para).then((res) => {
                    if (res.data.success) {
                        this.$message({
                            message: '修改成功，请重新登陆,查看状态!',
                            type: 'success'
                        });
                        //重置表单
                        this.$refs['shopForm'].resetFields();
                        this.dialogVisible2 = false
                        // alert('修改成功，请重新登陆,查看状态')
                    } else {
                        this.$message({
                            message: res.data.message,
                            type: 'error'
                        });
                    }
                });
            },
            //logo上传成功之后
            handleSuccess(response, file, fileList) {
                //上传成功之后，给表单得logo设置值
                this.shop.logo = response.resultObj;


            },
            //清空图片
            handleRemove(file, fileList) {
                /*var filePath = file.response.resultObj;
                this.$http.delete("/common/fastDfs/?path=" + filePath).then(res => {
                        if (res.data.success) {
                            this.$message({
                                message: '删除成功!',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: '删除失败!',
                                type: 'error'
                            });
                        }
                    })*/
                console.log(fileList)
                console.log(file)

            },

            settledIn() {
                this.$refs.shopForm.validate((valid) => {
                    //校验表单成功后才做一下操作
                    if (valid) {
                        this.$confirm('确认修改吗？', '提示', {}).then(() => {
                            this.sumbit1()
                        });
                    }
                })
            },
            login2() {
                this.$router.push({path: '/login'});
            }


        },
        mounted: function () {
            //取session
            let user = sessionStorage.getItem('user');
            // this.user = user
            //转json对象
            let user1 = JSON.parse(user);

            console.log(this.user)
            console.log(user1)
            this.user[0].username = user1.username;
            this.user[0].email = user1.email;
            this.user[0].phone = user1.phone;
            this.user[0].address = user1.shop.address;
            this.user[0].name = user1.shop.name;
            this.user[0].tel = user1.shop.tel;
            this.user[0].logo = user1.shop.logo;
            this.user[0].registerTime = user1.shop.registerTime;
            this.user[0].loginInfo = user1.loginInfo.id;
            this.id = user1.shop.id
            this.logo1 = "http://121.37.194.36" + this.user[0].logo
            let state = user1.shop.state;
            if (state === -1) {
                this.state = "驳回"
            } else if (state === 1) {
                this.state = "待激活"
            } else if (state === 0) {
                this.state = "待审核"
            }

        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .errPage-container {
        width: 800px;
        max-width: 100%;
        margin: 100px auto;

        .pan-back-btn {
            background: #008489;
            color: #fff;
            border: none !important;
        }

        .pan-gif {
            margin: 0 auto;
            display: block;
        }

        .pan-img {
            display: block;
            margin: 0 auto;
            width: 100%;
        }

        .text-jumbo {
            font-size: 60px;
            font-weight: 700;
            color: #484848;
        }

        .list-unstyled {
            font-size: 14px;

            li {
                padding-bottom: 5px;
            }

            a {
                color: #008489;
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
</style>
